<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TodoList 静态文件</title>
  <style>
    /* base */
    body {
      background-color: #fff;
    }

    .btn {
      display: inline-block;
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
      border-radius: 4px;
    }
    .btn:focus {
      outline: none;
    }
    .btn-danger {
      color: #fff;
      background-color: #da4f49;
      border: 1px solid #bd362f;
    }
    .btn-danger:hover {
      color: #fff;
      background-color: #bd362f;
    }
    
    .todo-container {
      width: 600px;
      margin: 0 auto;
    }
    .todo-wrap {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
    }

    .todo-header input {
      width: 560px;
      height: 28px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 8px;
    }

    .todo-header input:focus {
      outline: none;
      border-color: rgba(82, 168, 236, 0.8);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }

    .todo-main {
      margin-left: 0px;
      border: 1px solid #ddd;
      border-radius: 2px;
      padding: 0;
    }
    .todo-empty {
      height: 40px;
      line-height: 40px;
      border: 1px solid #ddd;
      border-radius: 2px;
      padding-left: 5px;
      margin-top: 10px;
    }

    li {
      list-style: none;
      height: 36px;
      line-height: 36px;
      padding: 0 5px;
      border-bottom: 1px solid #ddd;
    }
    li label {
      float: left;
      cursor: pointer;
    }
    li label, li input {
      vertical-align: middle;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
    li button {
      float: right;
      display: none;
      margin-top: 3px;
    }
    li:before {
      content: initial;
    }

    li:last-child {
      border-bottom: none;
    }

    .todo-footer {
      height: 40px;
      line-height: 40px;
      padding-left: 6px;
      margin-top: 5px;
    }

    .todo-footer label {
      display: inline-block;
      margin-right: 20px;
      cursor: pointer;
    }

    .todo-footer label input {
      position: relative;
      top: -1px;
      vertical-align: middle;
      margin-right: 5px;
    }

    .todo-footer button {
      float: right;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 头部 -->
        <div class="todo-header">
          <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
        <!-- 主要部分 -->
        <ul class="todo-main">
          <li class="todo-item">
            <label>
              <input type="checkbox" />
              <span>xxxxxx</span>
            </label>
            <button class="btn btn-danger">删除</button>
          </li>
          <li class="todo-item">
            <label>
              <input type="checkbox" />
              <span>xxxxxx</span>
            </label>
            <button class="btn btn-danger">删除</button>
          </li>
          <li class="todo-item">
            <label>
              <input type="checkbox" />
              <span>xxxxxx</span>
            </label>
            <button class="btn btn-danger">删除</button>
          </li>
        </ul>
        <!-- 底部 -->
        <div class="todo-footer">
          <label>
            <input type="checkbox" />
          </label>
          <span>
            <span>已完成 0</span> / 全部 2
          </span>
          <button class="btn btn-danger">清除已完成任务</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>